<template>
  <div class="login-page min-h-screen flex items-center justify-center px-8 relative">
    <!-- Toast 组件 -->
    <Toast ref="toastRef" />

    <!-- 登录容器 -->
    <div class="relative z-10 w-full max-w-md">
      <div class="login-card backdrop-blur-2xl rounded-2xl p-8 shadow-2xl">
        <!-- 标题 -->
        <div class="mb-8 text-center">
          <div class="flex items-center justify-between mb-4">
            <router-link 
              to="/" 
              class="text-gray-400 hover:text-[#42d392] transition-colors flex items-center gap-1"
            >
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
              </svg>
              <span class="text-sm">返回</span>
            </router-link>
            <div></div>
          </div>
          <h1 class="text-3xl font-bold mb-2">
            <span class="bg-gradient-to-r from-[#42d392] to-[#647eff] bg-clip-text text-transparent">
              开启探索之旅
            </span>
          </h1>
          <p class="text-sm text-gray-400">邮箱验证码登录 · 首次自动注册</p>
        </div>

        <!-- 表单 -->
        <form @submit.prevent="handleSubmit" class="space-y-5">
          <!-- 邮箱输入 -->
          <div class="form-group">
            <label for="email" class="block text-sm font-medium text-gray-300 mb-2">
              邮箱地址
            </label>
            <div class="flex gap-2">
              <input
                id="email"
                v-model="formData.email"
                type="email"
                placeholder="your@email.com"
                :disabled="codeSent"
                class="form-input flex-1 px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:outline-none focus:border-[#42d392]/50 focus:bg-white/10 transition-all duration-300 disabled:opacity-50"
                required
              />
              <button
                type="button"
                @click="sendCode"
                :disabled="!formData.email || codeSent || isLoading"
                class="send-code-button px-4 py-3 rounded-lg font-semibold text-sm transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {{ codeButtonText }}
              </button>
            </div>
          </div>

          <!-- 验证码输入 -->
          <div class="form-group">
            <label for="code" class="block text-sm font-medium text-gray-300 mb-2">
              验证码
            </label>
            <input
              id="code"
              v-model="formData.code"
              type="text"
              placeholder="输入6位验证码"
              maxlength="6"
              :disabled="!codeSent"
              class="form-input w-full px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:outline-none focus:border-[#42d392]/50 focus:bg-white/10 transition-all duration-300 disabled:opacity-50"
              required
            />
            <p v-if="codeSent" class="text-xs text-gray-500 mt-1">
              验证码已发送至邮箱，{{ codeCountdown }}秒后过期
            </p>
            <p v-else class="text-xs text-gray-500 mt-1">
              点击发送验证码后，验证码将发送至你的邮箱
            </p>
          </div>

          <!-- 邀请码输入（可选） -->
          <div class="form-group">
            <label for="inviteCode" class="block text-sm font-medium text-gray-300 mb-2">
              邀请码
              <span class="text-gray-500 text-xs font-normal">（可选）</span>
            </label>
            <input
              id="inviteCode"
              v-model="formData.inviteCode"
              type="text"
              placeholder="输入邀请码（可不填）"
              class="form-input w-full px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:outline-none focus:border-[#42d392]/50 focus:bg-white/10 transition-all duration-300"
            />
          </div>

          <!-- 提交按钮 -->
          <button
            type="submit"
            :disabled="isLoading || !codeSent"
            class="login-button w-full px-4 py-3 rounded-lg font-semibold text-white transition-all duration-300 relative overflow-hidden group disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <span v-if="!isLoading" class="relative z-10">登录</span>
            <span v-else class="relative z-10 flex items-center justify-center gap-2">
              <svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
              </svg>
              登录中...
            </span>
          </button>

          <!-- 协议说明 -->
          <p class="text-xs text-gray-500 text-center leading-relaxed">
            登录或完成注册即代表你同意
            <a href="#" class="text-[#42d392] hover:text-[#42d392]/80 transition-colors">用户协议</a>
            和
            <a href="#" class="text-[#42d392] hover:text-[#42d392]/80 transition-colors">隐私政策</a>
          </p>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import Toast from '@/components/Toast.vue'

const router = useRouter()
const toastRef = ref()
const isLoading = ref(false)
const codeSent = ref(false)
const codeCountdown = ref(60)

const formData = ref({
  email: '',
  code: '',
  inviteCode: ''
})

const codeButtonText = computed(() => {
  if (codeCountdown.value < 60 && codeCountdown.value > 0) {
    return `${codeCountdown.value}秒后重试`
  }
  return '发送验证码'
})

const sendCode = async () => {
  if (!formData.value.email) {
    toastRef.value?.warning('请输入邮箱地址')
    return
  }

  isLoading.value = true
  try {
    // 模拟发送验证码请求
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 这里应该调用实际的发送验证码 API
    console.log('发送验证码至:', formData.value.email)
    
    codeSent.value = true
    codeCountdown.value = 60
    
    // 显示成功提示
    toastRef.value?.success('验证码已发送至邮箱', '成功', 3000)
    
    // 倒计时
    const timer = setInterval(() => {
      codeCountdown.value--
      if (codeCountdown.value <= 0) {
        clearInterval(timer)
        codeSent.value = false
      }
    }, 1000)
  } catch (error) {
    toastRef.value?.error('发送验证码失败，请重试', '错误')
    console.error('发送验证码错误:', error)
  } finally {
    isLoading.value = false
  }
}

const handleSubmit = async () => {
  if (!formData.value.email || !formData.value.code) {
    toastRef.value?.warning('请填写邮箱和验证码')
    return
  }

  isLoading.value = true
  try {
    // 模拟登录/注册请求
    await new Promise(resolve => setTimeout(resolve, 1500))
    
    // 这里应该调用实际的登录/注册 API
    console.log('登录/注册信息:', {
      email: formData.value.email,
      code: formData.value.code,
      inviteCode: formData.value.inviteCode || null
    })
    
    // 成功后显示提示并跳转
    toastRef.value?.success('登录成功！欢迎回来', '成功', 2000)
    
    setTimeout(() => {
      router.push({ name: 'home' })
    }, 500)
  } catch (error) {
    toastRef.value?.error('登录失败，请重试', '错误')
    console.error('登录错误:', error)
  } finally {
    isLoading.value = false
  }
}
</script>

<style scoped>
.login-page {
  background: linear-gradient(to bottom right, #050505, #0a0a0a, #0d0d0d);
  position: relative;
}

.login-card {
  background: linear-gradient(135deg, 
    rgba(5, 15, 10, 0.95) 0%, 
    rgba(8, 18, 15, 0.95) 50%, 
    rgba(8, 15, 20, 0.95) 100%
  );
  border: 2px solid rgba(66, 211, 146, 0.4);
  box-shadow: 
    0 12px 48px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(66, 211, 146, 0.3),
    0 0 40px rgba(66, 211, 146, 0.2),
    0 0 60px rgba(100, 126, 255, 0.1);
  animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-input:focus {
  box-shadow: 0 0 20px rgba(66, 211, 146, 0.3);
}

.login-button {
  color: #ffffff;
  border: 1.5px solid rgba(66, 211, 146, 0.4);
  background: linear-gradient(135deg, 
    rgba(15, 35, 25, 0.6), 
    rgba(15, 25, 35, 0.4)
  );
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(66, 211, 146, 0.2),
    0 0 30px rgba(66, 211, 146, 0.15);
}

.login-button:hover:not(:disabled) {
  border-color: rgba(66, 211, 146, 0.8);
  transform: translateY(-2px);
  box-shadow: 
    0 12px 40px rgba(66, 211, 146, 0.25),
    inset 0 1px 0 rgba(66, 211, 146, 0.3),
    0 0 40px rgba(66, 211, 146, 0.2),
    0 0 20px rgba(100, 126, 255, 0.15);
}

.login-button:active:not(:disabled) {
  transform: translateY(0);
}

.send-code-button {
  color: #ffffff;
  border: 1.5px solid rgba(66, 211, 146, 0.4);
  background: linear-gradient(135deg, 
    rgba(15, 35, 25, 0.6), 
    rgba(15, 25, 35, 0.4)
  );
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(66, 211, 146, 0.2),
    0 0 15px rgba(66, 211, 146, 0.1);
  white-space: nowrap;
}

.send-code-button:hover:not(:disabled) {
  border-color: rgba(66, 211, 146, 0.8);
  transform: translateY(-1px);
  box-shadow: 
    0 6px 16px rgba(66, 211, 146, 0.2),
    inset 0 1px 0 rgba(66, 211, 146, 0.3),
    0 0 20px rgba(66, 211, 146, 0.15);
}

.send-code-button:active:not(:disabled) {
  transform: translateY(0);
}
</style>
